import React from "react";
import {connect} from "react-redux";
import {fetchPosts, reset} from "../../actions";


import Events from "../../utils/Events";
import Goods from "../../components/Goods";
import CommonTitle from "../../components/CommonTitle";

class categoryGoods extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageindex:1,
            listItems:[],
            isLoading:true,
            categoryCode:0
        }
    }

    componentWillMount() {
        const query = this.props.location.query;
        document.title = query.categoryName;
    }

    componentDidMount() {
        const query = this.props.location.query;
        this.setState({categoryCode: query.categoryCode});
        const header= {"X-Client-ID":"123456"}
        this.props.dispatch(reset("categoryGoods",header))
        this.props.dispatch(fetchPosts("categoryGoods",header,{"categoryCode": query.categoryCode, "pageindex":this.state.pageindex, "pagesize":10}))
        this._scrollListener = Events.on(window, 'scroll', this.checkButtom.bind(this))
    }

    componentWillUnmount() {
         this._scrollListener && this._scrollListener.off();
    }

    addList(lists){
        this.setState({isLoading:lists.length == 10 ? true:false});
        if(this.state.pageindex == 1){
            this.setState({listItems:lists});
        }else{
            this.setState({listItems:this.state.listItems.concat(lists)});
        }
    }

    checkButtom(){
        const header= {"X-Client-ID":"123456"}
        let scrollTop = document.body.scrollTop,
            innerHeight = window.innerHeight,
            scrollHeight = document.body.scrollHeight,
            pageindex = this.state.pageindex;

        if(scrollTop + innerHeight >= scrollHeight && this.state.isLoading ){
            pageindex++;
            this.setState({pageindex:pageindex});
            this.props.dispatch(reset("categoryGoods",header));
            this.props.dispatch(fetchPosts("categoryGoods", header,
                {
                    categoryCode: this.state.categoryCode,
                    pageindex:pageindex,
                    pagesize:10
                })
            )
        }
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.GoodsList.errorCode == 0){
            this.addList(nextProps.GoodsList.data.categoryGoodsVos);
        }
    }

    render() {
        return (
            <div>
                <CommonTitle text={this.props.location.query.categoryName} showBack={false}/>
                <div className="mall-goods-list">
                    <ul>
                        {this.state.listItems.map((item, index)=>{
                                return(
                                    <Goods key={index} item={item}/>
                                )
                            }
                        )}
                    </ul>
                </div>
            </div>
        )
    }
}


categoryGoods.contextTypes = {
    router:React.PropTypes.object
}

function mapStateToProps(state){
    const { postsByApi } = state
    const {
        isFetching,
        items: GoodsList
    } = postsByApi["categoryGoods"] || {
        isFetching: false,
        items: {}
    }
    return {
        GoodsList,
        isFetching
    }
}


export default connect(mapStateToProps)(categoryGoods);